<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>用户组管理</title>
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="__PUBLIC__/layui/css/layui.css" media="all">
<link rel="stylesheet" href="__PUBLIC__/admin/css/admin.css">
<link rel="stylesheet" type="text/css"
	href="__PUBLIC__/admin/css/font-awesome.min.css">
</head>
<body class="layui-bg-gray">
	<div class="layui-fluid">
		<div class="layui-row layui-col-space10">
			<div class="layui-col-md12 layui-col-xs12">
				<div class="layui-card">
					<div class="layui-card-header">用户组列表</div>
					<div class="layui-card-body">
						<button id="addBtn"
							class="layui-btn layui-btn-primary layui-btn-sm">
							<i class="fa fa-plus-circle"></i> 添加用户组
						</button>
						<table id="menu-table" lay-filter="menu-table"></table>
					</div>
				</div>
			</div>
		</div>
	</div>
	<script src="__PUBLIC__/layui/layui.js"></script>
	<script type="text/javascript"
		src="__PUBLIC__/common/js/jquery-2.0.3.min.js"></script>
	<script type="text/javascript" src="__PUBLIC__/common/js/common.js"></script>
	<script type="text/javascript">
		function initTable(pid) {
			layui.use([ 'table' ], function() {
				var table = layui.table;
				table.render({
					elem : '#menu-table',
					url : "{:U('Limits/roleList')}",
					method : "POST",
					page : {
						layout : [ 'prev', 'page', 'next', 'skip', 'count' ]
					},
					data : {
						pid : pid
					},
					cols : [ [ {
						field : 'id',
						title : 'ID'
					}, {
						field : 'role_name',
						title : '用户组名称',
					}, {
						title : '状态',
						templet : function(d) {
							var html = '';
							switch (d.status) {
							case "0":
								html = '启用';
								break;
							case "1":
								html = '禁用';
								break;
							}
							return html;
						}
					}, {
						field : 'remark',
						title : '备注'
					}, {
						title : "操作",
						align : 'center',
						toolbar : '#barTool',
					} ] ]
				});
				table.on('tool(menu-table)', function(obj) {
					var data = obj.data;
					var layEvent = obj.event;
					if (layEvent === 'edit') {
						parent.layer.open({
							type : 2,
							title : "修改角色信息",
							area : [ '500px', '50%' ],
							content : "{:U('Limits/editRole')}?nid=" + data.id,
							cancel : function(index, layero) {
								var cache = layui.data('cache');
								var status = cache.status;
								layui.data('cache', {
									key : 'status',
									value : null
								});
								if (status) {
									location.reload();
								}
							}
						});
					} else if (layEvent === 'status') {
						var tips = '';
						var status = 0;
						if (data.status == 0) {
							tips = '确认禁用该角色吗？';
							status = 1;
						} else {
							tips = '确认启用该角色吗？';
							status = 0;
						}
						parent.layer.confirm(tips, {
							title : '提示'
						}, function(index) {
							//obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
							parent.layer.close(index);
							var load = parent.layer.load(2, {
								shade : 0.3
							});
							$.ajax({
								type : "POST",
								url : "{:U('Limits/editRoleStatus')}",
								data : {
									nid : data.id,
									state : status
								},
								success : function(res) {
									parent.layer.close(load);
									parent.layer.msg(res.info);
									if (res.status == 1) {
										location.reload();
									}
								},
								error : function() {
									parent.layer.close(load);
								}
							});
						});
					} else if (layEvent == 'privilege') {
						parent.layer.open({
							type : 2,
							title : "[" + data.role_name + "]-角色授权",
							area : [ '500px', '50%' ],
							content : "{:U('Limits/rolePrivilege')}?nid="
									+ data.id,
						});
					}
				});
			});
		}
		$(function() {
			initTable(0);
			$("#addBtn").click(function() {
				parent.layer.open({
					type : 2,
					title : "添加用户组",
					area : [ '500px', '50%' ],
					content : "{:U('Limits/addUserGroup')}",
					cancel : function(index, layero) {
						var cache = layui.data('cache');
						var status = cache.status;
						layui.data('cache', {
							key : 'status',
							value : null
						});
						if (status) {
							location.reload();
						}
					}
				});
			});
		});
	</script>

	<script type="text/html" id="barTool">
		<a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="privilege">角色授权</a>
		<a class="layui-btn layui-btn-xs" lay-event="edit"><i class="fa fa-edit"></i>编辑</a>  
		<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="status">
		{{# if(d.status == 0){ }}
		<i class="fa fa-times-circle"></i>禁用
		{{# }  else { }}
		<i class="fa fa-check-circle"></i>启用
		{{# } }}
		</a>
	</script>
</body>
</html>